<template>
  <div>
     <el-button-group>
      <el-button  size="small" @click="$_zoomIn">放大</el-button>
      <el-button  size="small" @click="$_zoomOut">缩小</el-button>
      <el-button  size="small" @click="$_zoomReset">大小适应</el-button>
      <el-button  size="small" @click="$_translateRest">定位还原</el-button>
      <el-button  size="small" @click="$_reset">还原(大小&定位)</el-button>
      <el-button  size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</el-button>
      <el-button  size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
      <el-button  size="small" @click="$_download">下载图片</el-button>
      <el-button  size="small" @click="$_catData">查看数据</el-button>
      <el-button v-if="catTurboData"  size="small" @click="$_catTurboData">查看turbo数据</el-button>
      <el-button  size="small" @click="$_showMiniMap">查看缩略图</el-button>
      <el-button  size="small" @click="$_saveModel" type="success">保存模型</el-button>
    </el-button-group>
  </div>
</template>
<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import {onMounted, ref} from "vue";
import {MiniMap} from "@logicflow/extension";

defineOptions({ name: "Control"})
const props = defineProps({
  lf:{
    type:LogicFlow,
    default:()=>{return {} as LogicFlow}
  },
  catTurboData: Boolean
})
const emit = defineEmits(['catData','catTurboData','saveModel'])
const undoDisable = ref(true)
const redoDisable = ref(true)
const graphData = ref()
const dataVisible = ref(false)

onMounted(()=>{
  props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
    undoDisable.value = !undoAble
    redoDisable.value = !redoAble
  });
})
const $_zoomIn = () => {
  props.lf.zoom(true);
}
const $_zoomOut = () => {
  props.lf.zoom(false);
}
const $_zoomReset = () => {
  props.lf.resetZoom();
}
const $_translateRest = () => {
  props.lf.resetTranslate()
}
const $_reset = () => {
  props.lf.resetZoom();
  props.lf.resetTranslate();
}
const $_undo = () => {
  props.lf.undo();
}
const $_redo = () => {
  props.lf.redo();
}
const $_download = () => {
  props.lf.getSnapshot();
}
const $_catData = () => {
  emit('catData');
}
const $_catTurboData = () => {
  emit('catTurboData');
}
const $_showMiniMap = () => {
  (props.lf.extension.miniMap as MiniMap).show(props.lf.graphModel.width - 170, 40)
}
const $_saveModel = ()=>{
  emit('saveModel');
}
</script>
<style scoped>
</style>
